<template>
  <div class="personWarn">
    <ModalTitle title="网格员工作监控预警" />
    <div class="renyuan">
      <div class="zi">
        <div>平台人员情况</div>
      </div>
      <div class="leibiao">
        <div class="xiang">
          <div class="yi">
            <div class="tu"><span class="iconfont icon-ren1"></span></div>
            <div>坐席账号在线情况</div>
          </div>
          <div class="er">
            <span>{{ point.zuoxizaixian }}</span>
            <span class="dan">/{{ point.zuoxiAll }}个</span>
          </div>
        </div>
        <div class="xiang">
          <div class="yi">
            <div class="tu"><span class="iconfont icon-ren1"></span></div>
            <div>处置账号在线情况</div>
          </div>
          <div class="er">
            <span>{{ point.chuzhizhanghao }}</span>
            <span class="dan">/{{ point.chuzhiAll }}个</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ModalTitle from "@components/ModalTitle/Index.vue";
import { FengXianJianKong } from "@/api/zhangzi/index";
export default {
  components: { ModalTitle },
  data() {
    return {
      point: {
        zuoxizaixian: 0,
        zuoxiAll: 0,
        chuzhizhanghao: 0,
        chuzhiAll: 0,
      },
    };
  },
  mounted() {
    this.getPersonNum();
  },
  methods: {
    async getPersonNum() {
      const { success, data, message } =
        await FengXianJianKong.getPersonNumAPI();
      if (success) {
        this.$set(this.point, "zuoxizaixian", data.atHisTableCount);
        this.$set(this.point, "zuoxiAll", data.allAtHisTableCount);
        this.$set(this.point, "chuzhizhanghao", data.disposalCount);
        this.$set(this.point, "chuzhiAll", data.allDisposalCount);
      } else {
        this.$message.error(message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.personWarn {
  width: 100%;
  height: 100%;
  .renyuan {
    width: 100%;
    height: calc(100% - 3.8rem - 1rem);
    margin-top: 1rem;

    .zi {
      height: 3rem;
      font-size:  1.8rem;
      font-family: AppleSystemUIFont;
      color: #ffffff;
      line-height: 3rem;
    }

    .leibiao {
      display: flex;
      width: 100%;
      height: calc(100% - 3rem - 1.6rem);
      margin-top: 1.6rem;

      .xiang {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        .yi {
          display: flex;
          height: 2.5rem;
          font-size: 1.5rem;
          font-family: AppleSystemUIFont;
          color: #ffffff;
          line-height: 2.5rem;
          margin-bottom: 2rem;

          .tu {
            // margin-top: 0.4rem;
            margin-right: 1rem;
            width: 0.9rem;
            height: 0.9rem;
            // background: #999999;
          }
        }

        .er {
          margin-left: 2rem;
          font-size: 1.7rem;
          font-family: OPPOSans-H, OPPOSans;
          font-weight: normal;
          color: #077fff;
          line-height: 2.7rem;

          .dan {
            margin-left: 1rem;
            //   width: 5rem;
            font-size: 1.5rem;
            font-family: OPPOSans-R, OPPOSans;
            font-weight: normal;
            color: #ffffff;
            line-height: 1.3rem;
          }
        }
      }
    }
  }
}
</style>